{% extends 'checkstand/base/index.html' %}
{% load staticfiles %}
{% block css %}
    <link href="{% static 'bootstrapt/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
{% endblock %}
{% block js %}
    <script src="{% static 'bootstrapt/js/echarts.min.js' %}"></script>
    <script src="{% static 'bootstrapt/js/walden.js' %}"></script>
    <script src="{% static 'bootstrapt/js/bootstrap-datetimepicker.js' %}"></script>
    <script src="{% static 'bootstrapt/js/bootstrap-datetimepicker.zh-CN.js' %}"></script>
{% endblock %}


{% block nav_month %}class="active"{% endblock %}

{% block html_content %}
    <div class="row">
        <form class="form-horizontal " role="form">
            <legend>月收入分析</legend>
            <div class="form-group">
                <div class="col-md-2">
                </div>
                <div class="col-md-2">
                    <label for="dtp_input" class="control-label pull-right">日期选择：</label>
                </div>
                <div class="input-group date form_date col-md-3" data-date=""
                     data-date-format="yyyy-mm"
                     data-link-field="dtp_input" data-link-format="yyyy-mm">
                    <input class="form-control" type="text" id="dtp_input" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <div class="col-md-1">
                    <input type="button" class="button button-primary button-small" onclick="querySubmit();"
                           value="查询">
                </div>
                <div class="col-md-4">
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        月收入总览
                    </h3>
                </div>
                <div class="panel-body">
                    <div id="main" style="width:auto;height:450px;"></div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block modal %}{% endblock %}
{% block js_content %}
    <script>
        $(document).ready(function () {
            $('.form_date').datetimepicker({
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 3,
                minView: 3,
                forceParse: 0
            });
            fistSubmit()

        })

        function fistSubmit() {
            var today = new Date()
            var year = today.getFullYear()
            var month = today.getMonth() + 1
            var time = year + '-' + month
            $("#dtp_input").val(time)
            ajaxPost(time)
        }

        function querySubmit() {
            var time = $("#dtp_input").val();
            if (time == "") {
                $.scojs_message('输入为空', $.scojs_message.TYPE_ERROR);
            } else {
                ajaxPost(time)
            }

        }

        function getMonthDict(day) {
            days = parseInt(day)
            var income = {}
            for (var i = 1; i <= days; i++) {
                income[i] = 0
            }
            return income
        }

        function getMonthList(incomeMonth) {
            var data = []
            for (key in incomeMonth) {
                data.push([key, incomeMonth[key]])
            }
            return data
        }

        function getMonth(time) {
            return new Date(time).getMonth() + 1
        }

        function getYear(time) {
            return new Date(time).getFullYear()
        }

        function ajaxPost(time) {
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "{% url 'checkstand:ajax_income_month' %}",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {time: time},
                success: function (data) {
                    if (data.state == 'success') {
                        var orderMonth = JSON.parse(data.orderMonth)
                        var incomeMonth = getMonthDict(data.days)
                        var totalIncome = 0
                        for (var key in orderMonth) {
                            var order = orderMonth[key].fields
                            var orderTime = new Date(order.time)
                            var day = orderTime.getDate()
                            if (day in incomeMonth) {
                                incomeMonth[day] += order.totle_price
                                totalIncome += order.totle_price
                            }
                        }
                        var data = getMonthList(incomeMonth)
                        incomeChart(data, getYear(time), getMonth(time), totalIncome)

                    }
                    else if (data.state == "null") {
                        $.scojs_message('没有查询到' + time + '相关信息', $.scojs_message.TYPE_ERROR);

                        var incomeMonth = getMonthDict(data.days)
                        var data = getMonthList(incomeMonth)
                        incomeChart(data, getYear(time), getMonth(time), 0)
                    }


                },

            })
        }

        function incomeChart(data, year, month, totalIncome) {
            var histogram = echarts.init(document.getElementById('main'), "walden");

            var dateList = data.map(function (item) {
                return item[0];
            });
            var valueList = data.map(function (item) {
                return item[1];
            });

            option = {
                visualMap: [{
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400
                }],

                title: [{
                    left: 'center',
                    text: year + '年' + month + '月收入走势图',
                    subtext: '总收入' + totalIncome + "元",
                }],
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    data: dateList
                }],
                yAxis: [{
                    splitLine: {show: true}
                }],

                series: [{
                    type: 'line',
                    showSymbol: true,
                    data: valueList
                }]
            };
            histogram.setOption(option);
        }
    </script>
{% endblock %}


